<template>
  <div class="outer-box">
    <div class="more-box">
      <i class="el-icon-d-arrow-right w-arrow-right" v-if="showTab=='index'" @click="moreClick"></i>
      <el-button type="primary" v-else @click="backClick">返回</el-button>
    </div>
    <div class="inner-box" v-show="showTab=='index'">aaa</div>
    <div v-if="showTab=='details'" style="height:calc(100%-58px)">
      <detailsPage
        style="height:100%"
        @updateTablePage="updateTablePage"
        ref="detailsPage"
        :isAllowed="isAllowed"
      ></detailsPage>
    </div>
  </div>
</template>
<script>
import detailsPage from "./component/details.vue";
export default {
  components: {
    detailsPage,
  },
  data() {
    return {
      showTab: "index",
      childPage: "",
      isAllowed:false
    };
  },
  methods: {
    moreClick() {
      this.showTab = "details";
    },
    backClick() {
      this.showTab = "index";
    },
    updateTablePage(val) {
      this.childPage = val;
    },
  },
};
</script>
<style lang="scss" scoped>
.more-box {
  display: flex;
  justify-content: flex-end;
  padding: 5px 10px;
  .w-arrow-right {
    font-size: 22px;
  }
  .w-arrow-right:hover {
    color: #00aaee;
    cursor: pointer;
  }
}
.outer-box {
  height: 525px;
  background: #f0f2f5;
  height: calc(100vh-79px);
  overflow-y: scroll;
  .inner-box {
    margin: 10px;
  }
}
</style>